<script setup lang="ts">
import { Star } from '@element-plus/icons-vue'
import { inject, ref } from 'vue'
import { ResponseStatus, type IdentityHttpService } from './area/identity/service/identity-http.service';
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus';
import { switchTheme, type ThemeColor } from './services/theme.service';
var httpService = inject<IdentityHttpService>('IdentityHttpService');

const accountDialogVisable = ref(false);
const showSignUpForm = ref(false);
const formTitle = ref("");
const router = useRouter();
function showAcconutDialog(isSignUp: boolean) {
  accountDialogVisable.value = true;
  showSignUpForm.value = isSignUp;
  formTitle.value = isSignUp ? "注册" : "登录";
}

const signUpForm = ref<{
  userName: string,
  password: string,
  confirmPassword: string
}>({userName: '', password: '', confirmPassword: ''});
function signUp() {
  if(signUpForm.value?.password != signUpForm.value?.confirmPassword) {
    ElMessage({ type: 'warning', message: '' });
  } else {
    httpService?.apiUserAccountSignUp(signUpForm.value?.userName, signUpForm.value?.password, '2333').then(result => {
      if(result.status == ResponseStatus.Success) {
        ElMessage({ type: 'success', message: result.message });
      } else {
        ElMessage({ type: 'warning', message: result.message });
      }
    });
  }
}

function signIn() {
  httpService?.apiUserAccountSignIn("yez1", "123456").then(result => {
    if(result.status == ResponseStatus.Success) {
      localStorage.setItem('JwtToken', result.message!);
    }
  });
}

function handleChange(){
  router.push("/Identity/AccessControl");
};

function ColorDropdownHandlerCommand(color: ThemeColor) {
  switchTheme(color, false);
}
</script>

<template>
  <div class="header">
    <div class="header-content main-width">
      <h2>I'm Title</h2>
      <el-button @click="handleChange">转跳</el-button>
      <div style="flex-grow: 1;text-align:right"></div>

      <el-dropdown @command="ColorDropdownHandlerCommand">
        <el-icon style="font-size: 18px;margin-right: 16px;"><Star /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="0"><span class="color-span">Blue</span><div class="color-block blue"></div></el-dropdown-item>
            <el-dropdown-item :command="1"><span class="color-span">Sky</span><div class="color-block sky"></div></el-dropdown-item>
            <el-dropdown-item :command="2"><span class="color-span">Green</span><div class="color-block green"></div></el-dropdown-item>
            <el-dropdown-item :command="3"><span class="color-span">Lime</span><div class="color-block lime"></div></el-dropdown-item>
            <el-dropdown-item :command="4"><span class="color-span">Yellow</span><div class="color-block yellow"></div></el-dropdown-item>
            <el-dropdown-item :command="5"><span class="color-span">Orange</span><div class="color-block orange"></div></el-dropdown-item>
            <el-dropdown-item :command="6"><span class="color-span">Red</span><div class="color-block red"></div></el-dropdown-item>
            <el-dropdown-item :command="7"><span class="color-span">Magente</span><div class="color-block magente"></div></el-dropdown-item>
            <el-dropdown-item :command="8"><span class="color-span">Purple</span><div class="color-block purple"></div></el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <span class="span-button" @click="showAcconutDialog(false)">登录</span>
      <span style="margin: 0px 2px;">|</span>
      <span class="span-button" @click="showAcconutDialog(true)">注册</span>
    </div>
  </div>
  <div class="main">
    <div class="main-content main-width">
      <router-view></router-view>
    </div>
  </div>
 

  <el-dialog :title="formTitle" v-model="accountDialogVisable" :center="true" :show-close="false" width="400px">
    <!-- 登录表单 -->
    <div v-if="!showSignUpForm">
      <div class="account-input-box" style="border-top-right-radius: 5px;border-top-left-radius: 5px;">
        <span>账号</span>
        <input class="noborder-input" type="text"/>
      </div>
      <div class="account-input-box" style="border-top: 0px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;">
        <span>密码</span>
        <input class="noborder-input" type="password"/>
        <span style="cursor: pointer;color: #409eff">忘记密码？</span>
      </div>
      <div style="display: flex;margin-top: 12px;">
        <el-button style="flex-grow: 1;" @click="showAcconutDialog(true)">注册</el-button>
        <el-button style="flex-grow: 1;" type="primary">登录</el-button>
      </div>
    </div>
    
    <!-- 注册表单 -->
    <div v-if="showSignUpForm">
      <div class="account-input-box" style="border-top-right-radius: 5px;border-top-left-radius: 5px;">
        <span style="margin-right: 14px;">新账号</span>
        <input class="noborder-input" type="text" v-model="signUpForm.userName"/>
      </div>
      <div class="account-input-box" style="border-top: 0px;">
        <span style="margin-right: 14px;">邀请码</span>
        <input class="noborder-input" type="text"/>
      </div>
      <div class="account-input-box" style="border-top: 0px;">
        <span>设置密码</span>
        <input class="noborder-input" type="password" v-model="signUpForm.password"/>
      </div>
      <div class="account-input-box" style="border-top: 0px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;">
        <span>确认密码</span>
        <input class="noborder-input" type="password" v-model="signUpForm.confirmPassword"/>
      </div>
      <div style="display: flex;margin-top: 12px;">
        <el-button style="flex-grow: 1;" type="primary" @click="signUp()">注册并登录</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
@use './assets/variable.scss' as variable;
.header {
  height: 48px;
  border-bottom: #dcdfe6 solid 1px;
  box-shadow: 0px 1px 2px #dcdfe6;

  .header-content {
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;

    .span-button {
      border-radius: 5px;
      padding: 2px 8px;
      cursor: pointer;

      &:hover {
        color: #409eff;
        background-color: rgba(64, 158, 255, 0.1);
      }
    }
  }
}

.main {

  .main-content {
    min-height: calc(100vh - 48px);
    margin: auto;
  }
}

@media screen {
  .main-width {
    max-width: 1920px;

    @media (max-width: 1280px) and (min-width: 0px) {
      width: 960px;
    }

    @media (max-width: 1600px) and (min-width: 1280px) {
      width: 1024px;
    }

    @media (max-width: 1920px) and (min-width: 1600px) {
      width: 1600px;
    }

    @media (max-width: 1920px) and (min-width: 1600px) {
      width: 1280px;
    }

    @media (max-width: 2560px) and (min-width: 1920px) {
      width: 1600px;
    }

    @media (min-width: 2560px) {
      width: 1960px;
    }
  }
}

.account-input-box {
  display: flex;
  padding: 8px 12px;
  border: #dcdfe6 solid 1px;
}
.noborder-input {
  flex-grow: 1;
  padding-left: 8px;
  border: 0px;

  &:focus-visible {
    outline: 0;
  }
}

.color-span {
  width: 60px;
}

.color-block {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;

  &.blue { background-color: variable.$blue0; }
  &.sky { background-color: variable.$sky0; }
  &.green { background-color: variable.$green0; }
  &.lime { background-color: variable.$lime0; }
  &.yellow { background-color: variable.$yellow0; }
  &.orange { background-color: variable.$orange0; }
  &.red { background-color: variable.$red0; }
  &.magente { background-color: variable.$magente0; }
  &.purple { background-color: variable.$purple0; }
}
</style>
